<template>
  <div class="container">
    <div class="content">
      <!-- 左边全部贴吧分类开始 -->
      <div class="left-sec">
        <div class="f_class_title">全部贴吧分类</div>
        <!-- <div class="f_class_list_wrap">
          <div class="f_class_list">
            <ul class="f_class_menu">
              <li class="f_class_li first_li">
                <a
                  rel="noopener"
                  href="/f/index/forumpark?pcn=娱乐明星&amp;pci=0&amp;ct=1&amp;rn=20&amp;pn=1"
                  title="娱乐明星"
                  class="entertainment"
                  >娱乐明星</a
                >
              </li>
            </ul>

            <a rel="noopener" href="/f/index/forumclass" class="see_all_class"
              >查看全部分类</a
            >
          </div>
        </div> -->
        <div class="class_info" style="display: block">
          <div class="class_title">
            <a
              rel="noopener"
              href="/f/index/forumpark?pcn=体育迷&amp;pci=275&amp;ct=0&amp;rn=20&amp;pn=1"
              title="体育迷"
              class="district"
              >体育迷</a
            >
          </div>
          <ul class="class_list">
            <li class="">
              <a
                rel="noopener"
                class="cur_class"
                href="/f/index/forumpark?cn=%E8%B6%B3%E7%90%83&amp;ci=276&amp;pcn=%E4%BD%93%E8%82%B2%E8%BF%B7&amp;pci=275&amp;ct=0&amp;rn=20&amp;pn=1"
                title="足球"
                >足球</a
              >
            </li>
            <li>
              <a
                rel="noopener"
                href="/f/index/forumpark?cn=%E7%AF%AE%E7%90%83&amp;ci=277&amp;pcn=%E4%BD%93%E8%82%B2%E8%BF%B7&amp;pci=275&amp;ct=0&amp;rn=20&amp;pn=1"
                title="篮球"
                >篮球</a
              >
            </li>
            <li>
              <a
                rel="noopener"
                href="/f/index/forumpark?cn=NBA&amp;ci=278&amp;pcn=%E4%BD%93%E8%82%B2%E8%BF%B7&amp;pci=275&amp;ct=0&amp;rn=20&amp;pn=1"
                title="NBA"
                >NBA</a
              >
            </li>
            <li>
              <a
                rel="noopener"
                href="/f/index/forumpark?cn=CBA&amp;ci=279&amp;pcn=%E4%BD%93%E8%82%B2%E8%BF%B7&amp;pci=275&amp;ct=0&amp;rn=20&amp;pn=1"
                title="CBA"
                >CBA</a
              >
            </li>
            <li>
              <a
                rel="noopener"
                href="/f/index/forumpark?cn=%E4%B9%92%E4%B9%93%E7%90%83&amp;ci=280&amp;pcn=%E4%BD%93%E8%82%B2%E8%BF%B7&amp;pci=275&amp;ct=0&amp;rn=20&amp;pn=1"
                title="乒乓球"
                >乒乓球</a
              >
            </li>
            <li>
              <a
                rel="noopener"
                href="/f/index/forumpark?cn=%E7%BD%91%E7%90%83&amp;ci=281&amp;pcn=%E4%BD%93%E8%82%B2%E8%BF%B7&amp;pci=275&amp;ct=0&amp;rn=20&amp;pn=1"
                title="网球"
                >网球</a
              >
            </li>
            <li>
              <a
                rel="noopener"
                href="/f/index/forumpark?cn=%E8%88%9E%E8%B9%88&amp;ci=283&amp;pcn=%E4%BD%93%E8%82%B2%E8%BF%B7&amp;pci=275&amp;ct=0&amp;rn=20&amp;pn=1"
                title="舞蹈"
                >舞蹈</a
              >
            </li>
            <li>
              <a
                rel="noopener"
                href="/f/index/forumpark?cn=%E5%81%A5%E8%BA%AB&amp;ci=284&amp;pcn=%E4%BD%93%E8%82%B2%E8%BF%B7&amp;pci=275&amp;ct=0&amp;rn=20&amp;pn=1"
                title="健身"
                >健身</a
              >
            </li>
            <li class="">
              <a
                rel="noopener"
                class=""
                href="/f/index/forumpark?cn=%E7%BE%BD%E6%AF%9B%E7%90%83&amp;ci=286&amp;pcn=%E4%BD%93%E8%82%B2%E8%BF%B7&amp;pci=275&amp;ct=0&amp;rn=20&amp;pn=1"
                title="羽毛球"
                >羽毛球</a
              >
            </li>
            <li class="">
              <a
                rel="noopener"
                class=""
                href="/f/index/forumpark?cn=F1&amp;ci=421&amp;pcn=%E4%BD%93%E8%82%B2%E8%BF%B7&amp;pci=275&amp;ct=0&amp;rn=20&amp;pn=1"
                title="F1"
                >F1</a
              >
            </li>
            <li class="last_tag">
              <a
                rel="noopener"
                class=""
                href="/f/index/forumpark?cn=2014%E4%B8%96%E7%95%8C%E6%9D%AF&amp;ci=514&amp;pcn=%E4%BD%93%E8%82%B2%E8%BF%B7&amp;pci=275&amp;ct=0&amp;rn=20&amp;pn=1"
                title="2014世界杯"
                >2014世界杯</a
              >
            </li>
          </ul>
        </div>
      </div>
      <!-- 左边全部贴吧分类结束 -->
      <!-- 右边内容开始 -->
      <div class="right-sec">
        <div class="ba_class_title">体育迷</div>
        <ul class="ba_list">
          <li class="ba_info">
            <a href="" target="_blank" class="ba_href">
              <img
                width="105"
                height="105"
                class="ba_pic"
                src="https://imgsa.baidu.com/forum/pic/item/e1fe9925bc315c60196e376788b1cb13485477ba.jpg"
              />
              <div class="ba_content">
                <p class="ba_name">街舞吧</p>
                <p class="ba_num">
                  <span class="ba_m_num">361442</span
                  ><span class="ba_p_num">804656</span>
                </p>
                <p class="ba_desc">街舞爱好者的天地</p>
              </div>
            </a>
            <div class="ba_post">
              <a rel="noopener" href="/p/4998340328" target="_blank"
                >KL 伙伴们你们都在干嘛</a
              ><a rel="noopener" href="/p/4998064025" target="_blank"
                >【街舞】由于年龄问题，想跳舞也跳不上了，所以……</a
              >
            </div>
          </li>
          <li class="ba_info">
            <a href="" target="_blank" class="ba_href">
              <img
                width="105"
                height="105"
                class="ba_pic"
                src="https://imgsa.baidu.com/forum/pic/item/e1fe9925bc315c60196e376788b1cb13485477ba.jpg"
              />
              <div class="ba_content">
                <p class="ba_name">街舞吧</p>
                <p class="ba_num">
                  <span class="ba_m_num">361442</span
                  ><span class="ba_p_num">804656</span>
                </p>
                <p class="ba_desc">街舞爱好者的天地</p>
              </div>
            </a>
            <div class="ba_post">
              <a rel="noopener" href="/p/4998340328" target="_blank"
                >KL 伙伴们你们都在干嘛</a
              ><a rel="noopener" href="/p/4998064025" target="_blank"
                >【街舞】由于年龄问题，想跳舞也跳不上了，所以……</a
              >
            </div>
          </li>
          <li class="ba_info">
            <a href="" target="_blank" class="ba_href">
              <img
                width="105"
                height="105"
                class="ba_pic"
                src="https://imgsa.baidu.com/forum/pic/item/e1fe9925bc315c60196e376788b1cb13485477ba.jpg"
              />
              <div class="ba_content">
                <p class="ba_name">街舞吧</p>
                <p class="ba_num">
                  <span class="ba_m_num">361442</span
                  ><span class="ba_p_num">804656</span>
                </p>
                <p class="ba_desc">街舞爱好者的天地</p>
              </div>
            </a>
            <div class="ba_post">
              <a rel="noopener" href="/p/4998340328" target="_blank"
                >KL 伙伴们你们都在干嘛</a
              ><a rel="noopener" href="/p/4998064025" target="_blank"
                >【街舞】由于年龄问题，想跳舞也跳不上了，所以……</a
              >
            </div>
          </li>
        </ul>
      </div>
      <!-- 右边内容结束 -->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Forumpark",
});
</script>

<script setup lang="ts"></script>

<style scoped lang="scss">
a {
  text-decoration: none;
  color: #2d64b3;
  background-color: transparent;
  font-size: 12px;
}
* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: content-box;
}
.container {
  border-top: 1px solid #f0f0f0;
  margin-top: 2px;
  .content {
    width: 1000px;
    overflow: hidden;
    margin: 0 auto;
    //左边全部贴吧分类
    .left-sec {
      width: 210px;
      float: left;
      margin-top: 10px;

      .f_class_title {
        height: 34px;
        background: url(//tb2.bdstatic.com/tb/static-spage/img/new_index_yao/square1_88ee9ee.png)
          no-repeat 0 0;
        color: #fff;
        cursor: pointer;
        padding-left: 20px;
        font: 14px/34px "Microsoft YaHei", Arial, sans-serif;
      }
      .f_class_list_wrap {
        padding-bottom: 9000px;
        margin-bottom: -9000px;
        background-color: #f5f8fa;
        border: 1px solid #dcdcdc;
        border-top: 0;
        overflow: visible;
        .f_class_list {
          font-size: 14px;
          background-color: #f5f8fa;

          .f_class_menu {
            list-style: none;
            .first_li {
              border-top: 1px solid #f5f8fa;
            }
            .f_class_li {
              height: 39px;
              padding-left: 13px;
              .entertainment {
                display: block;
                padding-left: 25px;
                font-family: STHeiti, "Microsoft Yahei", "Microsoft YaHei",
                  Arial, sans-serif;
                line-height: 40px;
                border-bottom: 1px dotted #b1b4b6;
                width: 156px;
                background-image: url(//tb2.bdstatic.com/tb/static-spage/img/new_index_yao/square2_16d3adc.png);

                color: #333;
                background-position: 0 -394px;
                text-decoration: none;
                background-color: transparent;
              }
            }
          }
        }
      }

      .class_info {
        padding-bottom: 9000px;
        margin-bottom: -9000px;
        background-color: #f5f8fa;
        border: 1px solid #dcdcdc;
        border-top: 0;
        .class_title {
          padding: 8px 0 0 10px;

          a:visited {
            text-decoration: none;
          }
          .district {
            color: #758cb1;
            font: 16px "Microsoft YaHei", Arial, sans-serif;
            background-position: 0 -197px;
            background-color: transparent;
            text-decoration: none;
          }
        }
        .class_list {
          width: 190px;
          margin: 3px 0 12px;
          list-style: none;
          overflow: hidden;
          padding-left: 5px;
          .last_tag {
            border-right: 0;
          }
          li {
            padding: 0 6px;
            float: left;
            line-height: 12px;
            border-right: 1px solid #cacaca;
            margin: 10px 0 5px;
            list-style: none;
            font-size: 12px;
            a {
              color: #666;
              padding: 3px 5px;
              word-break: keep-all;
              white-space: nowrap;
              text-decoration: none;
              background-color: transparent;
            }

            .cur_class {
              color: #fff;
              background-color: #3f95e5;
              border-color: #378ddb;
            }
          }
        }
      }
    }
    .right-sec {
      width: 770px;
      float: left;
      margin-top: 10px;
      margin-left: 20px;
      min-height: 1000px;

      .ba_class_title {
        border-bottom: 2px solid #3f95e5;
        color: #197fcd;
        font-family: "Microsoft YaHei", Arial, sans-serif;
        font-size: 20px;
        margin: 3px 0 20px;
        padding-bottom: 11px;
      }
      .ba_list {
        // display: flex;
        // justify-content: space-between;

        li:nth-of-type(even) {
          margin-left: 14px;
        }
        .ba_info {
          float: left;
          border: 1px solid #e7e7e7;
          border-radius: 2px;
          width: 376px;
          margin-top: 15px;
          position: relative;
          box-shadow: 0 2px 0 #f3f3f3;

          .ba_href {
            display: block;
            margin: 9px;
            display: inline-block;
            .ba_pic {
              float: left;
              display: block;
              padding: 1px;
              background-color: #efefef;
            }

            .ba_content {
              width: 226px;
              float: left;
              margin-left: 15px;
              overflow: hidden;
              .ba_name {
                color: #444;
                font: 16px/20px STHeiti, "Microsoft Yahei", "Microsoft YaHei",
                  Arial, sans-serif;
              }
              .ba_num {
                color: #f96e02;
                height: 24px;
                span {
                  padding-left: 16px;
                  display: block;
                  float: left;
                  background-image: url(//tb2.bdstatic.com/tb/static-spage/img/new_index_yao/square1_88ee9ee.png);
                  font: 12px/22px Tahoma, "Microsoft YaHei", Arial, sans-serif;
                }
                .ba_m_num {
                  background-position: 0 -123px;
                  margin-right: 30px;
                }
                .ba_p_num {
                  background-position: 0 -98px;
                }
              }
              .ba_desc {
                color: #999;
                height: 40px;
                width: 218px;
                font-size: 12px;
              }
            }
          }
          .ba_post {
            height: 48px;
            border-top: 1px solid #e7e7e7;
            line-height: 22px;
            padding-top: 5px;
            color: #999;
            overflow: hidden;
            background: url(//tb2.bdstatic.com/tb/static-spage/img/new_index_yao/square1_88ee9ee.png)
              no-repeat 0 -187px;
            a {
              margin-left: 80px;
              display: block;
              width: 290px;
              overflow: hidden;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>
